<template>
	<nt-container>
		<view class="history-search">
			<u-search :customStyle="{padding:'10rpx'}" height="75rpx" placeholder="关键词" v-model="params.keywords"
				@search="init" @custom="init" @clear="init"></u-search>
		</view>
		<u-list class="list" :height="height" @scrolltolower="getList" @refresherrefresh="refresherrefresh"
			enableBackToTop refresher-enabled :refresher-triggered="isPull" refresher-background="#F2F4F6"
			refresher-threshold="50">
			<block v-if="orderList.length>0">
				<view class="item" v-for="it in orderList" :key="it.id"
					@tap="nav(`/subpackage/order/pages/_id?id=${it.id}`)">
					<view class="name">
						{{ it.customername }} <text
							@tap.stop="makePhoneCall(it.customerphone)">{{ it.customerphone }}</text>
					</view>
					<view class="address">
						<view class="label">{{ it.address }}</view>
						<view class="copy" @tap.stop="copyText(it.address)">复制</view>
					</view>
					<view class="flex space-between wx-content">
						<view>维修：{{it.worker_name}}</view>
						<view>维修完成：{{it.completion_date}}</view>
					</view>
					<view class="content space-between flex">
						<view class="content-item">总报价：<text class="cf">{{it.order_price}}</text></view>
						<view class="content-item">总成本：<text class="cf">{{it.cost_price}}</text></view>
						<view class="content-item">业绩：<text class="cf">{{it.profit}}</text></view>
					</view>
					<view class="backlist" v-if="it.orderbranch && it.orderbranch.length > 0">
						<view class="backlist-item" v-for="c in it.orderbranch" :key="c.id">
							<view class="backlist-item__row flex space-start items-center">
								<view class="backlist-item__col mr-20">{{c.is_type}}：<text
										class="c6">{{ c.worker_name }}</text></view>
								<view class="backlist-item__col">{{c.is_type}}完成：<text
										class="c6">{{ c.branch_status_text }}</text></view>
							</view>
							<view class="backlist-item__row flex space-start items-center">
								<view class="backlist-item__col mr-20">师傅给佣金：<text
										class="cf">{{ c.yongjin_worker_price }}</text></view>
								<view class="backlist-item__col mr-20">公司给佣金：<text
										class="cf">{{ c.yongjin_city_price }}</text></view>
								<view class="backlist-item__col">总佣金：<text class="cf">{{ c.yongjin_sum_price }}</text>
								</view>
							</view>
							<view class="back-remarks" v-if="c.is_type === '返修'">
								<view class="back-remarks__item">
									<text class="label">问题原因：</text>
									{{ c.problem_type }}
								</view>
								<view class="back-remarks__item">
									<text class="label">返修备注：</text>
									{{ c.problem }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<mescroll-empty v-else></mescroll-empty>
		</u-list>
	</nt-container>
</template>

<script>
	import {
		getHistoryPage
	} from "@/api"
	export default {
		data() {
			return {
				isPull: false,
				orderList: [],
				params: {
					page: 1,
					limit: 10,
					keywords: ''
				},
				isNext: true,
				loading: false,
				height: 300
			}
		},
		onLoad(options) {
			this.getList()
			this.setHeight()
		},
		methods: {
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.list')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.height = windowHeight - res[0].top
										console.log(that.height)
									}).exec()
						})

					}
				})
			},
			getList() {
				if (this.loading || !this.isNext) return;
				this.loading = true
				getHistoryPage(this.params).then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.orderList = this.orderList.concat(data.data);
						this.params.page++
						if (this.orderList.length >= data.total) {
							this.isNext = false
						}
					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			refresherrefresh() {
				this.isPull = true
				this.init()
			},
			init() {
				this.orderList = []
				this.params.page = 1
				this.params.limit = 10
				this.isNext = true;
				this.getList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 20rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;

		text {
			color: var(--theme-color);
			margin-left: 10rpx;
		}
	}

	.flex {
		display: flex;
	}

	.space-between {
		justify-content: space-between;
	}

	.space-start {
		justify-content: flex-start;
	}

	.items-center {
		align-items: center;
	}

	.address {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.label {
			flex: 1;
			margin-right: 20rpx;
		}

		.copy {
			font-size: 24rpx;
			color: #fff;
			border-radius: 4rpx;
			background: var(--theme-color);
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;
			width: 60rpx;
			flex-shrink: 0;
		}
	}

	.wx-content {
		font-size: 28rpx;
		color: #333;
		padding: 10rpx 0;
	}

	.content {
		padding: 20rpx;
		border-radius: 10rpx;
		background: #f5f5f5;
		font-size: 26rpx;
		color: #666;
		margin-top: 10rpx;

		&-label {
			font-weight: bold;
			color: #333;
			font-size: 28rpx;
		}

	}

	.c6 {
		color: #666;
		font-weight: normal;
	}

	.cf {
		color: #f00;
		font-weight: normal;
	}

	.backlist-item+.backlist-item {
		border-top: 1rpx solid #fff;
	}

	.backlist {
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		border-radius: 10rpx;

		&-item {
			font-size: 26rpx;
			padding: 20rpx 0;

			&__row {
				padding: 5rpx 0;
			}

			&__col {
				font-weight: bold;
				color: #333;

				&.mr-20 {
					margin-right: 20rpx;
				}
			}
		}
	}

	.back-remarks {
		padding: 10rpx 0;

		&__item {
			color: #666;
			line-height: 1.6;

			text {
				font-weight: bold;
				color: #333;
			}
		}
	}

	.history-search {
		background-color: #fff;
	}
</style>